<template>
  <div class="commMainForm-container-Css">
    <button @click="addContent">增加记录</button>
    <button @click="Websocketclick">记录增加</button>
    <button @click="SetCookies">记录Cookies</button>
    <button @click="GetCookies">获取Cookies</button>
    <button @click="GetIP">获取IP地址</button>
    <button @click="GetSingletonFirst">Get一次单例模式数据</button>
    <div class="commMainForm-main-Css" ref="chatContent">
      <div v-for="(item, index) in commMainFormData" :key="index">
        <div>{{ item.sendTime }}</div>
        <div>{{ item.sendValue }}</div>
        <div>{{ item.sendHeadPhoto }}</div>
        <div>{{ item.sendPerson }}</div>
      </div>
    </div>
    <div>
      <button @click="Getweatherforecast">Get天气</button>
      <button @click="Posttoken">Post登陆</button>
      <button @click="alertinputBox">展示inputBox内容</button>
    </div>
    <div ref="inputBox" class="inputBox-Css" contenteditable="true"></div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "commMainForm",

  data: function () {
    return {
      string: "string",
      bool: true,
      array: [1, 2, 3],
      obj: { name: "天行子", age: 23 },
      commMainFormData: [
        {
          sendTime: "发送时间1",
          sendValue: "发送内容1",
          sendHeadPhoto: "发送头像1",
          sendPerson: "发送者1",
        },
        {
          sendTime: "发送时间2",
          sendValue: "发送内容2",
          sendHeadPhoto: "发送头像2",
          sendPerson: "发送者2",
        },
        {
          sendTime: "发送时间3",
          sendValue: "发送内容3",
          sendHeadPhoto: "发送头像3",
          sendPerson: "发送者3",
        },
      ],
    };
  },
  methods: {
    addContent() {
      var sendMessage = {
        sendTime: "发送时间" + (this.commMainFormData.length + 1),
        sendValue: "发送内容" + (this.commMainFormData.length + 1),
        sendHeadPhoto: "发送头像" + (this.commMainFormData.length + 1),
        sendPerson: "发送者" + (this.commMainFormData.length + 1),
      };
      this.commMainFormData.push(sendMessage);

      /*let _this=this

      setTimeout(function () {
        _this.$refs.chatContent.scrollTop = _this.$refs.chatContent.scrollHeight;
      }, 500);*/

      this.$nextTick(function () {
        this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
      });
    },

    SocketTestApi() {
      var that = this;

      var server = "ws://139.196.222.182:5000"; //如果开启了https则这里是wss，未开启https则是ws

      var WEB_SOCKET = new WebSocket(server + "/ws");

      WEB_SOCKET.onopen = function (evt) {
        console.log("Connection open ..." + evt);
      };

      /*WEB_SOCKET.onmessage = function (evt) {
        if (evt.data) {
          console.log("Received Message: " + evt.data);
        }
      };*/
      WEB_SOCKET.onmessage = function (evt) {
        if (evt.data) {
          //console.log("Received Message: " + evt.data);
          var changdu = that.commMainFormData.length;

          var messagedata = JSON.parse(evt.data);

          var sendMessage = {
            sendTime: messagedata.sendTime + (changdu + 1),
            sendValue: messagedata.sendValue + (changdu + 1),
            sendHeadPhoto: messagedata.sendHeadPhoto + (changdu + 1),
            sendPerson: messagedata.sendPerson + (changdu + 1),
          };
          that.commMainFormData.push(sendMessage);

          /*let _this=this

      setTimeout(function () {
        _this.$refs.chatContent.scrollTop = _this.$refs.chatContent.scrollHeight;
      }, 500);*/

          that.$nextTick(function () {
            that.$refs.chatContent.scrollTop =
              that.$refs.chatContent.scrollHeight;
          });
        }
      };

      WEB_SOCKET.onclose = function (evt) {
        console.log("Connection closed." + evt);
      };
    },

    Websocketclick() {
      axios
        .get("http://139.196.222.182:5000/GetSendMessage")
        .then(function (response) {
          // handle success
          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },

    SetCookies() {
      var value = "测试创建Cookies";
      this.$cookies.set("token", value, "10s"); //设置cookies对象 10秒后过期
    },

    GetCookies() {
      console.log(this.$cookies.get("token")); //获取cookies对象
    },

    GetIP() {
      axios
        .get("http://139.196.222.182:5000/GetIP")
        .then(function (response) {
          // handle success
          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },

    GetSingletonFirst() {
      console.log(this.$cookies.get("token"));
      axios({
        url: "http://139.196.222.182:5000/GetSingletonFirst",
        method: "GET",
        headers: {
          Authorization: "Bearer " + this.$cookies.get("token"),
        },
      })
        .then((response) => {
          // handle success
          console.log(response);
        })
        .catch((error) => {
          // handle error
          console.log(error);
        });
    },

    Getweatherforecast() {
      console.log(this.$cookies.get("token"));
      axios({
        url: "http://localhost:58592/api/WeatherForecast/getweather",
        method: "GET",
        headers: {
          Authorization: "Bearer " + this.$cookies.get("token"),
        },
      })
        .then((response) => {
          // handle success
          console.log(response);
        })
        .catch((error) => {
          // handle error
          console.log(error);
        });
    },

    Posttoken() {
      axios({
        url: "http://localhost:58592/api/Authorize/token",
        method: "POST",
        data: {
          User: "ztb",
          Password: "123456",
        },
      })
        .then((response) => {
          // handle success
          console.log(response);
          this.$cookies.set("token", response.data.token, "10000s"); //设置cookies对象 10000秒后过期
        })
        .catch((error) => {
          // handle error
          console.log(error);
        });
    },

    alertinputBox() {
      console.log(this.$refs.inputBox.innerHTML);
    },
  },

  mounted() {
    this.SocketTestApi();
  },
};
</script>

<style scoped>
.commMainForm-container-Css {
  display: flex;
  justify-content: center;

  align-items: center;
  width: 100%;
}
.commMainForm-main-Css {
  width: 900px;
  height: 600px;
  overflow: scroll;
  background-color: pink;
}
.inputBox-Css {
  width: 900px;
  height: 600px;
  overflow: scroll;
  background-color: aqua;
}
</style>